<script setup>
import {reactive, ref} from 'vue';
import {R_rechargeInfoService, rechargeInfoService} from "@/api/recharge.js";

//分页条数据模型

const pageNum = ref(1)//当前页
const total = ref(20)//总条数
const pageSize = ref(10)//每页条数
const realname=ref()
const phonenumber=ref()
const email=ref()
const address=ref()
//用来记录搜索框的内容
const search_info=ref()
//选项框
const radio=ref(3)

//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
  pageSize.value = size
  rechargeRecordsList();
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
  pageNum.value = num
  rechargeRecordsList();
}


const userData =ref([{
  userid:'',
  phonenumber:'',
  realname:'',
  address:'',
  registerationdate:'',
  accountbalance:'',
  userstatus:'',
  usertype:'',
  email:'',
},]);

import {R_userInfoService,R_usersendArrearsMail,R_userChangestatus} from '@/api/user.js'
import {ElMessage} from "element-plus";
const R_userInfoList=async ()=> {
  if (radio.value===3) {
    phonenumber.value=search_info.value
  }else if (radio.value===6) {
    realname.value=search_info.value
  }else if (radio.value===9) {
    email.value=search_info.value
  }else if (radio.value===12) {
    address.value=search_info.value
  }
  let params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    realname:realname.value,
    phonenumber:phonenumber.value,
    email:email.value,
    address:address.value
  }
  let result = await R_userInfoService(params)
  let filteredData = result.data.items.filter(item => item.usertype === 0);
  userData.value = filteredData
  total.value = result.data.total
}
R_userInfoList()

const R_sendArrearsMail=async (index,row)=>{
  await R_usersendArrearsMail(row.phonenumber)
  ElMessage.success("已成功发送")
}

const R_changeStatus=async (index,row)=>{
  await R_userChangestatus(row.phonenumber)
  ElMessage.success("已成功修改")
  R_userInfoList()
}

</script>

<template>
  <div>
    <el-row type="flex">
      <el-radio-group v-model="radio" >
        <el-radio :value="3">手机号</el-radio>
        <el-radio :value="6">姓名</el-radio>
        <el-radio :value="9">邮箱</el-radio>
        <el-radio :value="12">地址</el-radio>
      </el-radio-group>
      <el-form>
        <el-form-item style="margin-left: 10px;">
          <el-input placeholder="请输入搜索内容" v-model="search_info"></el-input>
        </el-form-item>
      </el-form>

      <el-form-item style="margin-left: 10px;" @click="R_userInfoList">
        <el-button type="primary">提交</el-button>
      </el-form-item>
    </el-row>
  </div>


    <el-table :data="userData" style="width: 100%" :row-style="{height: '50px'}" stripe>
      <el-table-column prop="phonenumber" label="手机号"></el-table-column>
      <el-table-column prop="realname" label="真实姓名"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
      <el-table-column prop="registrationdate" label="注册日期"></el-table-column>
      <el-table-column prop="accountbalance" label="余额"></el-table-column>
      <el-table-column prop="userstatus" label="用户状态">
        <template #default="scope">
          <span v-if="scope.row.userstatus === 0">正常</span>
          <span v-if="scope.row.userstatus === 1">停水电</span>
        </template>
      </el-table-column>
      <el-table-column prop="email" label="邮箱"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" type="primary" @click="R_changeStatus(scope.$index, scope.row)">
            更改用户状态
          </el-button>
          <el-button size="small" type="warning" @click="R_sendArrearsMail(scope.$index, scope.row)">
            邮件催缴
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[ 5 , 8 ,10, 15]"
                   layout="jumper, total, sizes, prev, pager, next" background :total="total" @size-change="onSizeChange"
                   @current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end" />
</template>

<style scoped lang="scss">

</style>